<template>
    <div class="content">
        <Tips v-show="tipShow" :msg="tipText"/>
        <div class="title">
            <p>发布帖子</p>
        </div>
        <div class="main">
            <div class="send">
                <div class="name">
                    <span>文章标题：</span>
                    <input type="text" placeholder="请输入文章标题" v-model="name">
                </div>
                <div class="name">
                    <span>文章分类：</span>
                    <input type="text" placeholder="请输入文章类别" v-model="title">
                </div>
                <div class="neirong">
                    <span>文章内容：</span>
                    <textarea class="input" placeholder="请输入文章内容" v-model="content"></textarea>
                </div>
                <div class="btn">
                    <div class="yes" @click="sendPosts">确认发布</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Tips from '@/components/Tips'
    import {mapState} from 'vuex'
    export default {
        name:"Addrelease-Component",
        components:{Tips},
        data(){
            return {
                name:"",
                title:"",
                content:""
            }
        },
        computed:{
            ...mapState('About',['tipShow','tipText'])
        },
        methods: {
            sendPosts(){
                const info = {
                    name : this.name,
                    title : this.title,
                    content : this.content
                }

                this.$store.dispatch('About/addPosts',info)
                this.name = '' 
                this.title = ''
                this.content = ''
            }
        },
    }
</script>

<style lang="less" scoped>
    .content{
        width: 100%;
        overflow: auto;

        .title{
            font-size: 1.8vw;
            margin-top: 2.6vw;

            p{
                padding-left: 1.3vw;
                margin:0 auto;
                background: #fff;
                width: 90%;
                height:5.2vw;
                line-height: 5.2vw;
            }
        }

        .main{
            margin-top: 2.6vw;
            .send{
                width: 90%;
                margin: 0 auto;
                background: #fff;
                padding: 2vw 0;
                // height: 400px;
                display: flex;
                flex-flow: column;
                justify-content: center;
                align-items: center;

                .name{
                    font-size: 1.4vw;
                    color: #ccc;
                    width: 80%;
                    margin-bottom: 2vw;
                    height: 3vw;
                    color: rgb(90, 89, 89);
                    font-weight: 1000;

                    input{
                        width: 34vw;
                        height: 3vw;
                        padding-left: 0.5vw;
                        outline: none;
                        transition: 0.4s;
                        border-radius: 0.7vw;
                        border: 0.1vw solid rgb(167, 164, 164);

                        &:focus{
                            font-size: 1.2vw;
                            box-shadow: 0 5px 2px 2px rgba(51, 51, 51, 0.11);
                        }
                    }
                }

                .neirong{
                    font-size: 1.4vw;
                    width: 80%;
                    display: flex;
                    align-items:top;
                    color: rgb(90, 89, 89);
                    font-weight: 1000;

                    .input{
                        padding-left: 0.5vw;
                        width: 34vw;
                        resize: none;
                        overflow: auto;
                        height: 19.5vw;
                        outline: none;
                        transition: 0.4s;
                        padding: 1vw 0 0 0.5vw ;
                        border-radius: 0.7vw;
                        border: 0.1vw solid rgb(167, 164, 164);

                        &:focus{
                            font-size: 1.2vw;
                            box-shadow: 0 5px 3px 3px rgba(51, 51, 51, 0.11);
                        }
                    }

                }

                .btn{
                    width: 80%;
                    display: flex;
                    margin-top: 2.6vw;
                    justify-content: center;

                    .yes{
                        cursor: pointer;
                        text-align: center;
                        width: 12%;
                        height: 30px;
                        background: red;
                        color: #fff;
                        line-height: 30px;
                        font-size: 1vw;
                    }
                }
            }
        }
    }
</style>